<template>
  <div>
    <div class="commodity">
      <!--// 左侧导航内容 -->
      <div class="leftNav" ref="leftNav">
        <ul>
          <li v-for="(item, index) in scrollDataInfo.shopList" :key="index"
              :class="{ typeStyle: index === currentIndex ,leftEventList: true}"
              ref="leftEventList"
              @click="onClickNav(index)">
            <span class="leftTit">{{ item.shopName }}</span>
          </li>
        </ul>
      </div>
      <!--// 右侧商品内容 -->
      <div class="rightContent" ref="rightContent">
        <ul>
          <li
              class="rightEventList"
              ref="rightEventList"
              v-for="(item, index) in scrollDataInfo.shopList"
              :key="index"
              :class="{empty_li:item.onShow}">
            <div class="rightTtitle">{{ item.shopName }}</div>
            <ul>
              <li class="gather" v-for="(item, index) in item.shopGather" :key="index">
                <div>
                  <img :src="item.shopImgUrl"/>
                </div>
                <div class="distance">
                  <div class="shopName">{{ item.shopName }}</div>
                  <div class="saleGood">
                    <span>月售{{ item.monthNum }}份</span>
                    <span>好评率{{ item.reputation }}%</span>
                  </div>
                  <div class="price">
                    <span>￥{{ item.price }}</span>
                  </div>
                </div>
              </li>
              <div style="height:1px"></div>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
/*
* 左右联动组件
* */
import {defineComponent} from "vue";

export default defineComponent({
  name: "scroll_page",
});
</script>
<script setup lang="ts">
import {ref, reactive, toRefs, computed, watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import BScroll from "better-scroll" //引入BScroll插件
import MouseWheel from '@better-scroll/mouse-wheel' //引入BScroll滚动插件


BScroll.use(MouseWheel)

const leftEventList = ref([])
const rightEventList = ref([])
const leftNav = ref()
const rightContent = ref()
const emptyLi = ref()

console.log('leftNav',leftNav)
console.log('leftEventList',leftEventList)
console.log('rightEventList',rightEventList)
// 数据对象
const scrollDataInfo = reactive({
  leftScrollY: 0, // 右侧滑动的时候距离顶部的值
  rightScrollY: 0, // 右侧滑动的时候距离顶部的值
  leftSide: [0], // 所有右侧分类li的top组成的数组  (列表第一次显示后就不再变化),
  leftNavItemIsVisibleList:[], // 左侧导航是否可见
  rightSide: [0], // 所有右侧分类li的top组成的数组  (列表第一次显示后就不再变化)
  //模拟的商品数据
  shopList: [
    {
      shopName: "居家1",
      shopGather: [
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/4dafc90ab96af8c7f7ceeb2896f2212a.png",
          shopName: "简约钟表",
          monthNum: 4,
          reputation: 98,
          price: 2,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/404c8206706344a557fea0353a654c83.png",
          shopName: "背枕",
          monthNum: 213,
          reputation: 99,
          price: 56.85,
        },
      ]
    },
    {
      shopName: "居家2",
      shopGather: [
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/4dafc90ab96af8c7f7ceeb2896f2212a.png",
          shopName: "简约钟表",
          monthNum: 4,
          reputation: 98,
          price: 2,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/404c8206706344a557fea0353a654c83.png",
          shopName: "背枕",
          monthNum: 213,
          reputation: 99,
          price: 56.85,
        },
      ]
    },
    {
      shopName: "居家3",
      shopGather: [
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/4dafc90ab96af8c7f7ceeb2896f2212a.png",
          shopName: "简约钟表",
          monthNum: 4,
          reputation: 98,
          price: 2,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/404c8206706344a557fea0353a654c83.png",
          shopName: "背枕",
          monthNum: 213,
          reputation: 99,
          price: 56.85,
        },
      ]
    },
    {
      shopName: "居家4",
      shopGather: [
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/4dafc90ab96af8c7f7ceeb2896f2212a.png",
          shopName: "简约钟表",
          monthNum: 4,
          reputation: 98,
          price: 2,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/404c8206706344a557fea0353a654c83.png",
          shopName: "背枕",
          monthNum: 213,
          reputation: 99,
          price: 56.85,
        },
      ]
    },
    {
      shopName: "居家5",
      shopGather: [
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/4dafc90ab96af8c7f7ceeb2896f2212a.png",
          shopName: "简约钟表",
          monthNum: 4,
          reputation: 98,
          price: 2,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/404c8206706344a557fea0353a654c83.png",
          shopName: "背枕",
          monthNum: 213,
          reputation: 99,
          price: 56.85,
        },
      ]
    },
    {
      shopName: "居家6",
      shopGather: [
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/4dafc90ab96af8c7f7ceeb2896f2212a.png",
          shopName: "简约钟表",
          monthNum: 4,
          reputation: 98,
          price: 2,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/404c8206706344a557fea0353a654c83.png",
          shopName: "背枕",
          monthNum: 213,
          reputation: 99,
          price: 56.85,
        },
      ]
    },
    {
      shopName: "居家7",
      shopGather: [
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/4dafc90ab96af8c7f7ceeb2896f2212a.png",
          shopName: "简约钟表",
          monthNum: 4,
          reputation: 98,
          price: 2,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/404c8206706344a557fea0353a654c83.png",
          shopName: "背枕",
          monthNum: 213,
          reputation: 99,
          price: 56.85,
        },
      ]
    },
    {
      shopName: "居家8",
      shopGather: [
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/4dafc90ab96af8c7f7ceeb2896f2212a.png",
          shopName: "简约钟表",
          monthNum: 4,
          reputation: 98,
          price: 2,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/404c8206706344a557fea0353a654c83.png",
          shopName: "背枕",
          monthNum: 213,
          reputation: 99,
          price: 56.85,
        },
      ]
    },
    {
      shopName: "居家9",
      shopGather: [
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/4dafc90ab96af8c7f7ceeb2896f2212a.png",
          shopName: "简约钟表",
          monthNum: 4,
          reputation: 98,
          price: 2,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/404c8206706344a557fea0353a654c83.png",
          shopName: "背枕",
          monthNum: 213,
          reputation: 99,
          price: 56.85,
        },
      ]
    },
    {
      shopName: "居家10",
      shopGather: [
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/4dafc90ab96af8c7f7ceeb2896f2212a.png",
          shopName: "简约钟表",
          monthNum: 4,
          reputation: 98,
          price: 2,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/404c8206706344a557fea0353a654c83.png",
          shopName: "背枕",
          monthNum: 213,
          reputation: 99,
          price: 56.85,
        },
      ]
    },
    {
      shopName: "居家11",
      shopGather: [
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/4dafc90ab96af8c7f7ceeb2896f2212a.png",
          shopName: "简约钟表",
          monthNum: 4,
          reputation: 98,
          price: 2,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/404c8206706344a557fea0353a654c83.png",
          shopName: "背枕",
          monthNum: 213,
          reputation: 99,
          price: 56.85,
        },
      ]
    },
    {
      shopName: "居家12",
      shopGather: [
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/4dafc90ab96af8c7f7ceeb2896f2212a.png",
          shopName: "简约钟表",
          monthNum: 4,
          reputation: 98,
          price: 2,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/404c8206706344a557fea0353a654c83.png",
          shopName: "背枕",
          monthNum: 213,
          reputation: 99,
          price: 56.85,
        },
      ]
    },
    {
      shopName: "居家13",
      shopGather: [
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/4dafc90ab96af8c7f7ceeb2896f2212a.png",
          shopName: "简约钟表",
          monthNum: 4,
          reputation: 98,
          price: 2,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/404c8206706344a557fea0353a654c83.png",
          shopName: "背枕",
          monthNum: 213,
          reputation: 99,
          price: 56.85,
        },
      ]
    },
    {
      shopName: "居家14",
      shopGather: [
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/4dafc90ab96af8c7f7ceeb2896f2212a.png",
          shopName: "简约钟表",
          monthNum: 4,
          reputation: 98,
          price: 2,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/404c8206706344a557fea0353a654c83.png",
          shopName: "背枕",
          monthNum: 213,
          reputation: 99,
          price: 56.85,
        },
      ]
    },
    {
      shopName: "居家15",
      shopGather: [
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/4dafc90ab96af8c7f7ceeb2896f2212a.png",
          shopName: "简约钟表",
          monthNum: 4,
          reputation: 98,
          price: 2,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/404c8206706344a557fea0353a654c83.png",
          shopName: "背枕",
          monthNum: 213,
          reputation: 99,
          price: 56.85,
        },
      ]
    },
    {
      shopName: "居家16",
      shopGather: [
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/4dafc90ab96af8c7f7ceeb2896f2212a.png",
          shopName: "简约钟表",
          monthNum: 4,
          reputation: 98,
          price: 2,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/404c8206706344a557fea0353a654c83.png",
          shopName: "背枕",
          monthNum: 213,
          reputation: 99,
          price: 56.85,
        },
      ]
    },
    {
      shopName: "居家17",
      shopGather: [
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/4dafc90ab96af8c7f7ceeb2896f2212a.png",
          shopName: "简约钟表",
          monthNum: 4,
          reputation: 98,
          price: 2,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/404c8206706344a557fea0353a654c83.png",
          shopName: "背枕",
          monthNum: 213,
          reputation: 99,
          price: 56.85,
        },
      ]
    },
    {
      shopName: "居家18",
      shopGather: [
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/4dafc90ab96af8c7f7ceeb2896f2212a.png",
          shopName: "简约钟表",
          monthNum: 4,
          reputation: 98,
          price: 2,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/404c8206706344a557fea0353a654c83.png",
          shopName: "背枕",
          monthNum: 213,
          reputation: 99,
          price: 56.85,
        },
      ]
    },
    {
      shopName: "居家19",
      shopGather: [
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/4dafc90ab96af8c7f7ceeb2896f2212a.png",
          shopName: "简约钟表",
          monthNum: 4,
          reputation: 98,
          price: 2,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/404c8206706344a557fea0353a654c83.png",
          shopName: "背枕",
          monthNum: 213,
          reputation: 99,
          price: 56.85,
        },
      ]
    },


    {
      shopName: "配件装饰",
      shopGather: [{
        shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/f9e64699f2b30840926558f7e6fef5b7.png",
        shopName: "蓝宝石项链",
        monthNum: 4871,
        reputation: 99,
        price: 899,
      },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/04ff245798456499336ab2ef6dd833ec.png",
          shopName: "眼镜框（无度数）",
          monthNum: 10214,
          reputation: 97,
          price: 9.9,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/1917c4b6918dabe384a0c17b8ef613b0.png",
          shopName: "腰带",
          monthNum: 4561,
          reputation: 99,
          price: 78,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/7bdf83cc4a65fb6e201fb7af34e77efb.png",
          shopName: "袜子",
          monthNum: 13541,
          reputation: 100,
          price: 9.9,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/06/01/7a6e5b5227cb606c48a097d712d4ee2f.png",
          shopName: "行李箱",
          monthNum: 7841,
          reputation: 98,
          price: 299,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/06/01/d3d0a300076c3e8337bca84dc2dfd496.png",
          shopName: "钱包小皮件",
          monthNum: 798,
          reputation: 96,
          price: 39.99,
        }
      ]
    },
    {
      shopName: "服装",
      shopGather: [{
        shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/534467788da6d2b479291913564b9c76.png",
        shopName: "男士外套",
        monthNum: 484,
        reputation: 100,
        price: 129.99,
      },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/7878107c86fdd36ee7c584d9a5966bdc.png",
          shopName: "女士外套",
          monthNum: 467,
          reputation: 98,
          price: 199.99,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/ec6e0e01c5b341401b2a910838f3d456.png",
          shopName: "王女士裙装",
          monthNum: 5641,
          reputation: 100,
          price: 56.9,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/06/01/8f101426deb15865773eedf2cea6c091.png",
          shopName: "衬衫",
          monthNum: 7845,
          reputation: 99,
          price: 45.9,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/06/01/718233411b1cb6ac7963bc33d2949890.png",
          shopName: "T恤",
          monthNum: 89742,
          reputation: 99,
          price: 29.9,
        },
        {
          shopImgUrl: "https://z3.ax1x.com/2021/12/02/otnUsg.png",
          shopName: "面包服",
          monthNum: 8874,
          reputation: 99,
          price: 119.9,
        },
        {
          shopImgUrl: "https://z3.ax1x.com/2021/12/02/otnHSK.png",
          shopName: "男士毛衣",
          monthNum: 79841,
          reputation: 100,
          price: 59.9,
        }
      ]
    },
    {
      shopName: "数码电器",
      shopGather: [{
        shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/f8f0d693f57dc2d57a664247d873011d.png",
        shopName: "苹果x",
        monthNum: 89754,
        reputation: 98,
        price: 2999.99,
      },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/1994edeebab2bc9b764d9a4b2d7a37c6.png",
          shopName: "耳机",
          monthNum: 48674,
          reputation: 100,
          price: 29.99,
        },
        {
          shopImgUrl: "https://cdn.it120.cc/apifactory/2018/11/07/f6e21e142cba3231b093a872f6b0f4d5.png",
          shopName: "电动牙刷",
          monthNum: 4649,
          reputation: 99,
          price: 29.99,
        },

      ]
    },
  ],
  leftScrollTarget: {}, // 左侧滚动对象
  rightScrollTarget: {}, // 右侧滚动对象

})

// 计算currentIndex
const currentIndex = computed(() => {
  const {
    rightScrollY,
    rightSide
  } = scrollDataInfo; //拿到每次滑动的值以及每一个分类的下标值
  //findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置
  //获取数组rightSide中每一个下标值并筛选条件返回第一个元素索引位置
  let index = rightSide.findIndex((top, index) => {
    // rightScrollY>=当前top && rightScrollY<下一个top
    return rightScrollY >= top && rightScrollY < rightSide[index + 1];
  });
  // 判断index的临界值
  if (index < 0) {
    index = rightSide.length - 2;
  }

  // 返回结果
  return index;
})

// 初始化滚动
const initializeRoll = () => {
  // new一个类的实例，前提必须确保父元素和子元素的内容已经正确渲染了，不然不会生效
  scrollDataInfo.leftScrollTarget = new BScroll(".leftNav", {
    click: true,
    mouseWheel: {
      speed: 20,
      invert: false,
      easeTime: 300,
      discreteTime: 400,
      throttleTime: 0,
      dampingFactor: 0.1,
    }
  });
  // 组件实例上挂属性
  scrollDataInfo.rightScrollTarget = new BScroll(".rightContent", {
    probeType: 2, // 因为惯性滑动不会触发
    click: true,
    mouseWheel: {
      speed: 20,
      invert: false,
      easeTime: 300,
      discreteTime: 400,
      throttleTime: 0,
      dampingFactor: 0,
    }
  });

  // 给右侧列表绑定scroll监听
  (scrollDataInfo.rightScrollTarget as any).on("mousewheelMove", ({x, y}) => {
    scrollDataInfo.rightScrollY = Math.abs(y);
    leftNavBackToViewport();
  });
  // 给右侧列表绑定scroll结束的监听
  (scrollDataInfo.rightScrollTarget as any).on("scrollEnd", ({x, y}) => {
    console.log("操作结束的下标值" + x, y);
    scrollDataInfo.rightScrollY = Math.abs(y);
  });
}
// 初始化rightSide和leftSide
const initializeOwn = () => {
  // 初始化rightSide
  const leftSide: Array<any> = [];
  const rightSide: Array<any> = [];
  let leftTop = 0;
  let rightTop = 0;
  leftSide.push(leftTop);
  rightSide.push(rightTop);
  // 获取右侧元素可滚动距离
  const rightScrollDistance = getScrollDistance(rightContent.value);
  // slice() 方法返回一个新的数组对象
  Array.prototype.slice.call(rightEventList.value).forEach(li => {
    rightTop += li.clientHeight; //相当于top = top + li.clientHeight
    if (Math.abs(rightScrollDistance) < rightTop){
      rightTop = rightScrollDistance
    }
    rightSide.push(rightTop);
  });
  Array.prototype.slice.call(leftEventList.value).forEach(li => {
    leftTop += li.clientHeight; //相当于top = top + li.clientHeight
    leftSide.push(leftTop);
  });

  //更新数据
  scrollDataInfo.leftSide = [...leftSide];
  scrollDataInfo.rightSide = [...rightSide];
  console.log("每一个分类的下标" + scrollDataInfo.rightSide);
}
//左侧点击事件
const onClickNav = (index) => {
  console.log(index);
  //拿到目标位置的rightScrollY，点击左侧导航，右侧列表滑动到对应的位置
  const rightScrollY = scrollDataInfo.rightSide[index];
  // // 点击的分类成为当前分类，索引当前选中的导航标题
  scrollDataInfo.rightScrollY = rightScrollY;
  // 平滑滑动右侧列表
  (scrollDataInfo.rightScrollTarget as any).scrollTo(0, -rightScrollY, 1000);
}
// 当右侧滚动式 左侧选中的导航不是视口内时，将导航滚动到视口内
const leftNavBackToViewport = () => {
  const currentActiveIsView = isElementInView(leftEventList.value[currentIndex.value],leftNav.value)
  // 上方不可见，向上滚动
  if (!currentActiveIsView.topIsView) {
    (scrollDataInfo.leftScrollTarget as any).scrollTo(0, -scrollDataInfo.leftSide[currentIndex.value], 300);
  }
  // 下方不可见，向下滚动
  if (!currentActiveIsView.bottomIsView) {
    (scrollDataInfo.leftScrollTarget as any).scrollTo(0, -scrollDataInfo.leftSide[currentIndex.value + 1] + leftNav.value.clientHeight, 400);
  }
}
// 点击左侧时候，右边窗口是否在时候内，是的话不滚动
// 判断元素在父元素内是否可见
const isElementInView = (el: any, container: any) => {
  const containerRect = container.getBoundingClientRect();
  const elRect = el.getBoundingClientRect();
  return {
    topIsView: elRect.top >= containerRect.top,
    bottomIsView: elRect.bottom <= containerRect.bottom,
    topDistance: elRect.top - containerRect.top,
    bottomDistance: elRect.bottom - containerRect.bottom,
  }
}

// 获取元素可滚动距离
const getScrollDistance = (el: any) => {
  const {scrollHeight, clientHeight} = el;
  console.log("可滚动距离", scrollHeight - clientHeight)
  return scrollHeight - clientHeight;
}
//组件挂载
onMounted(() => {
  initializeRoll(); //滑动初始化方法
  initializeOwn(); //初始化rightSide方法
})


</script>
<style scoped>
.commodity {
  /* 最大的盒子样式 */
  display: flex;
  position: fixed;
  height: 100%;
  width: 100%;
  background: #fff;
  overflow: hidden;
}

.leftNav {
  /* 左侧大盒子的整体样式 */
  width: 80px;
  height: 500px;
  overflow: hidden;
  background: rgb(248, 248, 248);
}

.typeStyle {
  /* 左侧导航选中的样式 */
  background: #fff;
  font-weight: bold;
  display: flex;
  align-items: center;
  color: rgb(255, 94, 121);
  justify-content: center;
  border-left: 2px solid rgb(255, 94, 121);
}

.leftTit {
  /* 左侧导航标题默认样式 */
  display: flex;
  height: 40px;
  justify-content: center;
  font-size: 12px;
  align-items: center;
}

.rightContent {
  /* 右侧大盒子的整体样式 */
  flex: 1;
  height: 500px;
  overflow: hidden;
}

.rightTtitle {
  /* 右侧标题样式 */
  padding-left: 12px;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  font-weight: bold;
  color: rgb(147, 153, 159);
  background: rgb(248, 248, 248);
  margin: 0;
}

.gather {
  /* 右侧每一个商品的样式 */
  display: flex;
  margin: 16px;
  display: flex;
  align-items: center;
}

.distance {
  /* 右侧图片与描述间距 */
  padding-left: 6px;
}

.gather img {
  /* 右侧图片样式 */
  width: 60px;
  height: 60px;
  vertical-align: middle;
}

:last-child {
  /* 点击左侧导航右侧内容与左边对齐 */
  margin-bottom: 0;
}

.shopName {
  /* 右侧商品标题字体大小 */
  font-size: 14px;
}

.saleGood {
  /* 右侧月售好评样式 */
  font-size: 10px;
  color: rgb(147, 153, 159);
  padding: 4px 0px;
}

.saleGood span:first-child {
  /* 月售样式 */
  padding-right: 10px;
}

.price {
  /* 价格样式 */
  font-weight: bold;
  font-size: 14px;
  color: rgb(255, 94, 121);
}
.empty_li{
  height: 50px;
  background-color:red;
}
</style>
